<template>
  <div class="container">
    <!-- 搜索工作栏 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="auto"
             class="search">
      <el-form-item label="采集器 ID" prop="stationId">
        <el-input v-model="queryParams.stationId" placeholder="请输入采集器 ID" clearable
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="数据采集上传时间" prop="monitorTime" v-if="tableVisible===false">
        <el-date-picker v-model="queryParams.monitorTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
                        type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']"/>
      </el-form-item>
      <el-form-item label="通道编号" prop="volt" v-if="tableVisible===false">
        <el-input v-model="queryParams.volt" placeholder="请输入通道编号" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="设备版本号" prop="version" v-if="tableVisible===false">
        <el-input v-model="queryParams.version" placeholder="请输入设备版本号" clearable
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="设备在线状态" prop="isOnline">
        <el-select v-model="queryParams.isOnline" placeholder="请选择设备在线状态" clearable size="small">
          <el-option label="在线" :value="1"></el-option>
          <el-option label="离线" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
      <el-form-item class="search-btn">
        <el-button type="primary" size="medium" @click="tableVisible =true">图表</el-button>
        <el-button size="medium" @click="tableVisible=false">列表</el-button>
      </el-form-item>
    </el-form>
    <!-- 图表 -->
    <div v-if="tableVisible" class="card-panel">
      <el-row :gutter="20">
        <el-col :xs="12" :sm="12" :lg="6" v-for="(item, index) in list" :key="index">
          <div class="card-panel-list">
            <div class="card-panel-top">
              <div class="card-panel-title">
                设备信息
              </div>
              <el-divider/>
              <el-descriptions :column="1" :label-style="{'color': '#999999' }">
                <el-descriptions-item>
                  <template slot="label">
                    <img src="@/assets/images/equipment.png" alt="" style="padding-right: 5px; margin:auto 0">
                    设备名称
                  </template>
                  <dict-tag :type="DICT_TYPE.EQUIPMENT_ACQUISITION_INFO_STATION_ID" :value="item.stationId"/>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <img src="@/assets/images/id.png" alt="" style="padding-right: 5px; margin:auto 0">
                    设备ID
                  </template>
                  {{ item.stationId }}
                </el-descriptions-item>
                <el-descriptions-item contentStyle="color:#1BBC8B">
                  <template slot="label">
                    <img src="@/assets/images/computer.png" alt="" style="padding-right: 5px; margin:auto 0">
                    设备状态
                  </template>
                  {{ item.isOnline === 0 ? '离线' : '在线' }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <img src="@/assets/images/time.png" alt="" style="padding-right: 5px;  margin:auto 0">
                    最新上报时间
                  </template>
                  {{ parseTime(item.createTime) }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <img src="@/assets/images/address.png" alt="" style="padding-right: 5px; margin:auto 0">
                    地址
                  </template>
                  庐江县同大镇
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="card-panel-bottom" @click="handleDetail(item)">
              <el-button size="mini" type="text">历史数据</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
      <pagination v-if="total> 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                  @pagination="getList" class="pagination" :layout="'total, prev, pager, next, jumper'"/>
    </div>
    <div v-else class="card-panel">
      <el-card>
        <!-- 操作工具栏 -->
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                       v-hasPermi="['equipment:info:create']">新增
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                       :loading="exportLoading" v-hasPermi="['equipment:info:export']">导出
            </el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <!-- 列表 -->
        <el-table v-loading="loading" :data="list">
          <el-table-column label="ID" align="center" prop="id"/>
          <el-table-column label="采集器 ID" align="center" prop="stationId"/>
          <el-table-column label="数据采集上传时间" align="center" prop="monitorTime" width="180">
            <template v-slot="scope">
            <span>{{ parseTime(scope.row.monitorTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="通道编号" align="center" prop="volt"/>
          <el-table-column label="当前 4G 信号强度" align="center" prop="rssi"/>
          <el-table-column label="4G 信号模组 imei" align="center" prop="imei"/>
          <el-table-column label="当前设备所处经度" align="center" prop="longitude"/>
          <el-table-column label="当前设备所处纬度" align="center" prop="latitude"/>
          <el-table-column label="当前设备是否存在 LED 显示屏" align="center" prop="dotled" min-width="150px">
            <template v-slot="scope">
              {{ scope.row.dotled === 0 ? '存在' : '不存在' }}
            </template>
          </el-table-column>
          <el-table-column label="阈值/定时控制选择" align="center" prop="controlOp">
            <template v-slot="scope">
              {{ scope.row.controlOp === 0 ? '阈值控制' : scope.row.controlOp === 1 ? '定时控制' : '手动控制' }}
            </template>
          </el-table-column>
          <el-table-column label="设备版本号" align="center" prop="version"/>
          <el-table-column label="设备在线状态" align="center" prop="isOnline">
            <template v-slot="scope">
              {{ scope.row.isOnline === 0 ? '离线' : '在线' }}
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="180">
            <template v-slot="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template v-slot="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                         v-hasPermi="['equipment:info:update']">修改
              </el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                         v-hasPermi="['equipment:info:delete']">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                    @pagination="getList"/>
      </el-card>
    </div>
    <!-- 对话框(添加 / 修改) -->
    <el-dialog :title="title" :visible.sync="open" width="800px" v-dialogDrag append-to-body class="addDialog">
      <el-form ref="form" :model="form" :rules="rules" label-width="auto">
        <el-form-item label="采集器 ID" prop="stationId">
          <el-input v-model="form.stationId" placeholder="请输入采集器 ID"/>
        </el-form-item>
        <el-form-item label="数据采集上传时间" prop="monitorTime">
          <el-date-picker clearable v-model="form.monitorTime" type="date" value-format="timestamp"
                          placeholder="选择数据采集上传时间"/>
        </el-form-item>
        <el-form-item label="通道编号" prop="volt">
          <el-input v-model="form.volt" placeholder="请输入通道编号"/>
        </el-form-item>
        <el-form-item label="当前 4G 信号强度" prop="rssi">
          <el-input v-model="form.rssi" placeholder="请输入当前 4G 信号强度"/>
        </el-form-item>
        <el-form-item label="4G 信号模组 imei" prop="imei">
          <el-input v-model="form.imei" placeholder="请输入4G 信号模组 imei"/>
        </el-form-item>
        <el-form-item label="当前设备所处经度" prop="longitude">
          <el-input v-model="form.longitude" placeholder="请输入当前设备所处经度"/>
        </el-form-item>
        <el-form-item label="当前设备所处纬度" prop="latitude">
          <el-input v-model="form.latitude" placeholder="请输入当前设备所处纬度"/>
        </el-form-item>
        <el-form-item label="当前设备是否存在LED显示屏" prop="dotled">
          <el-select v-model="form.dotled" placeholder="请输入当前设备是否存在 LED 显示屏">
            <el-option label="存在" :value="0"></el-option>
            <el-option label="不存在" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="阈值/定时控制选择" prop="controlOp">
          <el-select v-model="form.controlOp" placeholder="请输入阈值/定时控制选择">
            <el-option label="阈值控制" :value="0"></el-option>
            <el-option label="定时控制" :value="1"></el-option>
            <el-option label="手动控制" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备版本号" prop="version">
          <el-input v-model="form.version" placeholder="请输入设备版本号"/>
        </el-form-item>
        <el-form-item label="设备在线状态" prop="isOnline">
          <el-select v-model="form.isOnline" placeholder="请选择设备在线状态">
            <el-option label="在线" :value="1"></el-option>
            <el-option label="离线" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备类型(1:墒情,2:水质)" prop="type">
          <el-input v-model="form.type" placeholder="请输入设备类型(1:墒情,2:水质)"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {createInfo, deleteInfo, exportInfoExcel, getInfo, getInfoPage, updateInfo} from '@/api/equipment/info'
import {parseTime} from '@/utils/ruoyi'

export default {
  name: 'Info',
  components: {},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 设备信息列表
      list: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 9,
        stationId: null,
        isOnline: null,
        type: 1,
        createTime: []
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        stationId: [{ required: true, message: '采集器 ID不能为空', trigger: 'blur' }],
        monitorTime: [{ required: true, message: '数据采集上传时间不能为空', trigger: 'blur' }],
        isOnline: [{ required: true, message: '设备在线状态不能为空', trigger: 'change' }]
      },
      tableVisible: true
    }
  },
  created() {
    this.getList()
  },
  watch: {
    tableVisible(val) {
      if (val) {
        this.queryParams.pageSize = 9
      } else {
        this.queryParams.pageSize = 10
      }
      this.queryParams.pageNo = 1
      this.resetForm('queryForm')
      this.getList()
    }
  },
  methods: {
    parseTime,
    /** 查询列表 */
    getList() {
      this.loading = true
      // 执行查询
      getInfoPage(this.queryParams).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.loading = false
      })
    },
    /** 取消按钮 */
    cancel() {
      this.open = false
      this.reset()
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        stationId: undefined,
        monitorTime: undefined,
        volt: undefined,
        rssi: undefined,
        imei: undefined,
        longitude: undefined,
        latitude: undefined,
        dotled: undefined,
        controlOp: undefined,
        version: undefined,
        isOnline: undefined,
        type: undefined
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加设备信息'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id
      getInfo(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = '修改设备信息'
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        // 修改的提交
        if (this.form.id != null) {
          updateInfo(this.form).then(response => {
            this.$modal.msgSuccess('修改成功')
            this.open = false
            this.getList()
          })
          return
        }
        // 添加的提交
        createInfo(this.form).then(response => {
          this.$modal.msgSuccess('新增成功')
          this.open = false
          this.getList()
        })
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id
      this.$modal.confirm('是否确认删除设备信息编号为"' + id + '"的数据项?').then(function() {
        return deleteInfo(id)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      // 处理查询参数
      let params = { ...this.queryParams }
      params.pageNo = undefined
      params.pageSize = undefined
      this.$modal.confirm('是否确认导出所有设备信息数据项?').then(() => {
        this.exportLoading = true
        return exportInfoExcel(params)
      }).then(response => {
        this.$download.excel(response, '设备信息.xls')
        this.exportLoading = false
      }).catch(() => {
      })
    },
    handleDetail(item) {
      const id = item.stationId
      this.$router.push({
        path: '/equipment/info/details',
        query: { id: id }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  padding: 24px;
  background-color: rgb(240, 242, 245);
  min-height: calc(100vh - 86px);

  .search {
    padding: 32px 0;
    height: 100px;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 14px;

    .search-btn {
      float: right;
      padding-right: 20px;

      .el-button--primary {
        background: #4362ff;
        border-color: #4362ff;
      }

      .el-button--default {
        color: #4362ff;
        border-color: #4362ff;
      }
    }
  }

  .card-panel {
    .card-panel-list {
      margin: 15px 0;
      height: 350px;
      background: #fff;
      box-shadow: 0 3px 6px 1px rgba(67, 98, 255, 0.2);
      border-radius: 10px;
      position: relative;

      .card-panel-top {
        padding: 20px;

        .card-panel-title {
          border-left: 5px solid #4362ff;
          padding-left: 5px;
          font-size: 16px;
          font-weight: bold;
        }
      }

      .card-panel-bottom {
        padding: 20px 30px;
        width: 100%;
        text-align: center;
        position: absolute;
        left: 0;
        bottom: 0;
        background: #f5f8ff;
        border-radius: 0 0 10px 10px;

        .el-button--text {
          color: #4362ff;
          font-size: 16px;
        }
      }
    }

    .pagination {
      margin: 30px auto;
      width: 500px;
      background: rgb(240, 242, 245);
      color: #00afff;
    }
  }
}
</style>
